<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>歌单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="sheetSearchKey" placeholder="输入歌单名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="value" placeholder="请选择" size="small">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search"
                   @click="getAllSheet((pageParam.currentPage * pageParam.pageSize) - pageParam.pageSize, pageParam.pageSize, sheetSearchKey)">
          搜索
        </el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addSheetVisible=true">导入酷狗歌单</el-button>
        <el-popconfirm
          style="margin-left: 10px"
          confirm-button-text='继续'
          cancel-button-text='取消'
          icon="el-icon-info"
          title="同步操作可能时间较长，是否继续"
          @confirm="syncSheet"
        >
          <el-button size="small" type="primary" icon="el-icon-refresh" slot="reference" :loading="syncLoading">
            手动同步酷狗推荐歌单
          </el-button>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="sheetList" highlight-current-row border element-loading-text="拼命加载中"
              style="width: 100%;text-align: center">
      <el-table-column sortable prop="imgUrl" label="歌单封面" width="200" align="center">
        <template slot-scope="scope">
          <el-image :src="scope.row.imgUrl" style="width: 100px;height: 100px"></el-image>
        </template>
      </el-table-column>
      <el-table-column sortable prop="specialName" label="歌单名称" width="400">
        <template slot-scope="scope">
          <div v-html="scope.row.specialName"></div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="userName" label="歌单作者" width="200">
      </el-table-column>
      <el-table-column sortable prop="playCount" label="播放次数" width="200">
      </el-table-column>
      <el-table-column sortable prop="updateTime" label="添加时间">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="12">
              <el-button size="mini" @click="showSheetMusic(scope.row.specialId)">查看歌单音乐</el-button>
            </el-col>
            <el-col :span="12">
              <el-button size="mini" @click="showSheetDetail(scope.$index)">详情</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="12">
              <el-button size="mini" @click="showSheetUserDetail(scope.$index)">歌单用户信息</el-button>
            </el-col>
            <el-col :span="12">
              <el-popconfirm
                confirm-button-text='已知晓'
                cancel-button-text='我点错了'
                icon="el-icon-info"
                icon-color="red"
                title="删除不可逆，请谨慎操作"
                @confirm="deleteSheet(scope.row.id)"
              >
                <el-button size="mini" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParam.currentPage"
      :page-sizes="[10, 50, 100, 500]"
      :page-size="pageParam.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageParam.total">
    </el-pagination>
    <!--详情-->
    <el-dialog title="歌单详情" :visible.sync="sheetInfoVisible" width="60%">
      <el-descriptions :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            歌单名
          </template>
          {{sheetList[sheetDialog].specialName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            歌单ID
          </template>
          {{sheetList[sheetDialog].specialId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            歌单播放次数
          </template>
          {{sheetList[sheetDialog].playCount}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            用户名
          </template>
          {{sheetList[sheetDialog].userName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            是否为酷狗用户
          </template>
          {{sheetList[sheetDialog].isKugouUser}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            用户ID
          </template>
          {{sheetList[sheetDialog].userId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            歌单简介
          </template>
          {{sheetList[sheetDialog].intro}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!--歌单音乐-->
    <el-dialog title="歌单音乐" :visible.sync="sheetMusicVisible" width="60%">
      <el-table size="small" :data="sheetMusicList" highlight-current-row border element-loading-text="拼命加载中"
                style="width: 100%;text-align: center">
        <el-table-column sortable prop="fileName" label="歌曲名" width="200" align="center">
        </el-table-column>
        <el-table-column sortable prop="hash" label="hash" width="300" align="center">
        </el-table-column>
        <el-table-column sortable prop="albumId" label="专辑ID" width="100" align="center">
        </el-table-column>
        <el-table-column sortable prop="remark" label="专辑名" width="180">
        </el-table-column>
        <el-table-column sortable prop="fileSize" label="文件大小" width="100">
        </el-table-column>
        <el-table-column sortable prop="updateTime" label="添加时间">
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--查看歌单用户信息 -->
    <el-dialog title="歌单用户信息" :visible.sync="sheetUserInfoVisible" width="60%">
      <el-descriptions direction="vertical" :column="3" border>
        <el-descriptions-item label="头像">
          <el-image :src="sheetUserInfo.headerImg" style="width: 100px;height: 100px"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="兴趣">
          <el-tag v-for="(item,index) in sheetUserInfo.musicHobby" :key="index" style="margin-left: 5px">{{item}}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="个性签名">{{sheetUserInfo.personalSignature}}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{sheetUserInfo.username}}</el-descriptions-item>
        <el-descriptions-item label="性别">{{sheetUserInfo.sex}}</el-descriptions-item>
        <el-descriptions-item label="生日">{{sheetUserInfo.birthday}}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{sheetUserInfo.email}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!--添加歌单-->
    <el-dialog title="添加歌单" :visible.sync="addSheetVisible" width="60%">
      <el-input size="small" v-model="addSheetSearchKey" placeholder="输入歌单名称" style="width: 50%">
        <el-button slot="append" size="small" type="primary" icon="el-icon-search" @click="onlineSearchSheet">
          搜索
        </el-button>
      </el-input>
      <span style="margin-left: 20px">注：在线搜索酷狗歌单展示在下方,选则歌单后会自动导入歌单音乐</span>
      <el-table
        ref="multipleTable"
        :data="addSheetList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="imgurl" label="歌单封面" width="200">
          <template slot-scope="scope">
            <el-image :src="scope.row.imgurl" style="width: 100px;height: 100px"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="specialname" label="歌单名" width="300">
          <template slot-scope="scope">
            <div v-html="scope.row.specialname"></div>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="歌单用户" width="120">
          <template slot-scope="scope">
            <div v-html="scope.row.nickname"></div>
          </template>
        </el-table-column>
        <el-table-column prop="playcount" label="播放次数" width="120">
        </el-table-column>
        <el-table-column prop="publishtime" label="歌单发布时间">
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px;text-align: right">
        <el-button size="small" type="primary" @click="importSheet" :loading="importLoading">导入</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Sheet",
    data() {
      return {
        sheetSearchKey: '',
        sheetList: [],
        // 分页参数
        pageParam: {
          currentPage: 1,
          pageSize: 10,
          total: 1000
        },
        sheetInfoVisible: false,
        sheetDialog: 0,
        options: [{
          value: '',
          label: '全部'
        }, {
          value: '1',
          label: '酷狗用户'
        }, {
          value: '0',
          label: '平台用户'
        }],
        value: '',
        sheetMusicList: [],
        sheetMusicVisible: false,
        sheetUserInfoVisible: false,
        sheetUserInfo: {
          id: 0,
          username: '',
          email: '',
          sex: '',
          age: 0,
          birthday: '',
          headerImg: '',
          personalSignature: '',
          musicHobby: []
        },
        addSheetVisible: false,
        addSheetSearchKey: '',
        addSheetList: [],
        onlineSheetList: [],
        importLoading: false,
        syncLoading: false,
      }
    },
    created() {
      this.getAllSheet((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, '');
    },
    mounted() {
    },
    methods: {
      //同步酷狗推荐歌单
      syncSheet() {
        this.syncLoading = true;
        this.$axios({
          method: 'post',
          url: '/musicControl/updateMusicSheet',
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.$message.success(res.data.msg);
          } else {
            this.$message.warning(res.data.msg);
          }
          this.syncLoading = false;
        });
      },
      //在线搜索歌单
      onlineSearchSheet() {
        this.$axios({
          method: 'post',
          url: '/musicControl/onlineSheetSearch',
          data: {
            sheetSearchKey: this.addSheetSearchKey
          },
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          this.addSheetList = res.data.data.info;
        })
      },
      //导入歌单
      importSheet() {
        if (this.onlineSheetList.length === 0) {
          this.$notify.info({
            title: '提示',
            message: '您未选择导入歌单'
          });
        } else {
          this.importLoading = true;
          this.$axios({
            method: 'post',
            url: '/musicControl/importSheet',
            headers: {
              authentication: localStorage.getItem("adminToken")
            },
            data: {
              sheetList: this.onlineSheetList
            }
          }).then(res => {
            if (res.data.msgCode === '200') {
              this.$message.success(res.data.msg);
            } else {
              this.$message.warning(res.data.msg);
            }
          });
          this.importLoading = false;
        }
      },
      handleSelectionChange(val) {
        console.log(val);
        this.onlineSheetList = val;
      },
      //删除歌单
      deleteSheet(index) {
        if (index === undefined) {
          this.$notify.info({
            title: '提示',
            message: '删除错误'
          });
        } else {
          this.$axios({
            method: 'post',
            url: '/musicControl/deleteSheet/' + index,
            headers: {
              authentication: localStorage.getItem("adminToken")
            }
          }).then(res => {
            if (res.data.msgCode === '200') {
              this.$message.success(res.data.msg);
            } else {
              this.$message.error(res.data.msg);
            }
            this.getAllSheet((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, this.sheetSearchKey);
          })
        }
      },
      //查看歌单用户信息
      showSheetUserDetail(index) {
        if (this.sheetList[index].isKugouUser === 1) {
          this.$notify.info({
            title: '提示',
            message: '酷狗用户暂不支持查看'
          });
        } else {
          this.sheetUserInfoVisible = true;
          this.$axios({
            method: 'post',
            url: '/user/getUserInfoById/' + this.sheetList[index].userId,
            headers: {
              authentication: localStorage.getItem("adminToken")
            }
          }).then(res => {
            this.sheetUserInfo = res.data.data;
          })
        }
      },
      //展示歌单歌曲
      showSheetMusic(specialId) {
        this.sheetMusicVisible = true;
        this.$axios({
          method: 'post',
          url: '/musicControl/getSheetMusic/' + specialId,
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          this.sheetMusicList = res.data.data.info;
        })
      },
      //查看歌单细节
      showSheetDetail(index) {
        this.sheetInfoVisible = true;
        this.sheetDialog = index;
      },
      //获取歌单
      getAllSheet(start, size, searchKey) {
        this.$axios({
          method: 'post',
          url: '/musicControl/getAllSheet/' + start + "/" + size,
          data: {
            sheetSearchKey: searchKey,
            user: this.value
          },
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          this.pageParam.total = res.data.data.total;
          if (this.pageParam.total === 0) {
            this.sheetList = [{specialName: '未找到该歌单'}]
          } else {
            this.sheetList = res.data.data.info;
          }
        })
      },
      handleSizeChange(item) {
        this.pageParam.pageSize = item;
        this.getAllSheet((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, this.sheetSearchKey)
      },
      //页数改变时
      handleCurrentChange(item) {
        this.pageParam.currentPage = item;
        this.getAllSheet((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, this.sheetSearchKey)
      },
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }
</style>
